<template>
  <div class="theme-setting">
    <el-dialog title="设置竞价排名" :visible.sync="rankDialog" width="70%" :close-on-click-modal="false" @close="closeDialog">
      <div class="theme-left">
        <dl class="theme-title">
          <dt class="title">当前排名</dt>
          <dd class="des">从右侧拖拽添加</dd>
        </dl>
        <draggable class="selected-list" tag="ul" v-model="selectedTheme" v-bind="dragOptions" :move="onMove"
          @end="onEnd">
          <li class="selected-theme" v-for="item in selectedTheme" :key="item.type">{{ item.name }}</li>
        </draggable>

      </div>

      <div class="theme-right">
        <div class="theme-title">
          <h3 class="theme-right-title">
            <dt class="title">所有供应商</dt>
            <dd class="des">(除参与排名供应商外)</dd>
          </h3>
          <el-input style="width: 350px;" v-model="input" placeholder="请输入供应商名称或者拼音" clearable
            @input="setInput"></el-input>
        </div>
        <draggable class="theme-right-list" tag="ul" v-model="unSelectTheme" v-bind="dragOptions" :move="onMove"
          @end="onEnd">
          <li class="theme-right-item" v-for="item in screenList" :key="item.type">{{ item.name }}</li>
        </draggable>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="restoreDefault">恢复默认设置</el-button>
        <el-button type="primary" @click="saveThemeSet">保存</el-button>
      </span>

    </el-dialog>

  </div>
</template>
<script>
import draggable from "vuedraggable"
import pinyin from 'js-pinyin'
export default {
  name: 'DragDrop',
  components: {
    draggable
  },
  watch: {
    dialogVisible: {
      handler(newVal) {
        this.rankDialog = newVal
      },
      immediate: true
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rankDialog: this.dialogVisible,

      // 已选主题列表
      selectedTheme: [{
        type: 1,
        name: '选项1'
      }, {
        type: 2,
        name: '选项2'
      }, {
        type: 3,
        name: '选项3'
      }, {
        type: 4,
        name: '选项4'
      }],

      // 从接口中获取到的所有供应商(除参与排名的)
      unSelectTheme: [{
        type: 5,
        name: '选项5'
      }, {
        type: 6,
        name: '选项6'
      }],
      // 过滤后的所有供应商
      screenList: [],

      backSelectedTheme: [], // 选主题列表备份
      backUnSelectTheme: [], // 未选主题列表备份用于恢复默认设置
      relatedListLast: {}, // 已选主题列表最后一项
      isShowDel: false,

      input: null
    }
  },
  created() {
    this.screenList = _.cloneDeep(this.unSelectTheme)
  },

  methods: {
    // 输入框使用防抖函数
    setInput: _.debounce(function (e) {
      console.log(e)
      if (e) {
        pinyin.setOptions({ checkPolyphone: true, charCase: 1 });
        let content = pinyin.getFullChars(e)
        // 深拷贝一份数据
        let list = _.cloneDeep(this.unSelectTheme)
        let formatList = list.map(item => {
          return {
            name: item.name,
            type: item.type,
            label: item.name,
            pinyin: pinyin.getFullChars(item.name)
          }
        })
        let screenList = formatList.filter(item => {
          return item.pinyin.includes(content) || item.name.includes(content)
        })
        this.screenList = _.cloneDeep(screenList)
      } else {
        this.screenList = _.cloneDeep(this.unSelectTheme)
      }
    }, 500),
    onMove({ relatedContext, draggedContext, to }) {
      const relatedElement = relatedContext.element
      const draggedElement = draggedContext.element
      let dragInEl = to['className']
      if (dragInEl == 'selected-list') {
        this.isShowDel = false
        if (this.selectedTheme.length === 5) {
          // 判断往已选列表拖时，如果已经满足4项，则记录已选列表的最后一项
          // 拖拽结束时将此项清除到未选列表中
          this.relatedListLast = this.selectedTheme[this.selectedTheme.length - 1]
        }
      } else {
        this.isShowDel = true // 判断如果是往未选列表里拖的话显示垃圾桶
      }
      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      )
    },
    onEnd(dragObj) {
      let dragInEl = dragObj.to['className']
      if (dragInEl == 'selected-list') {
        if (this.selectedTheme.length > 5) {
          // 判断已选列表大于4项，将记录的最后一项过滤出来，并push到未选列表数组
          this.selectedTheme = this.selectedTheme.filter(item => {
            return item.type != this.relatedListLast.type
          })
          this.unSelectTheme.push(this.relatedListLast)
        }
      }
      if (dragInEl === 'theme-right-list') {
        // 判断是往未选列表拖时，拖拽结束时将垃圾桶隐藏
        this.isShowDel = false
      }
    },
    // 关闭模态框
    closeDialog() {
      this.$emit('close', false)
    },


    // 保存设置
    saveThemeSet() {
      const params = {
        taskTopicList: this.selectedTheme
      }
      if (this.selectedTheme.length !== 4) {
        return false
      }
    },
    // 恢复默认设置
    restoreDefault() {
      this.selectedTheme = this.backSelectedTheme
      this.unSelectTheme = this.backUnSelectTheme
    },
  },

  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: "description",
        disabled: false,
        ghostClass: "ghost"
      }
    }
  }
};

</script>
<style lang="scss" scoped>
body,
ul,
dl,
dt,
dd,
li,
h1,
h3 {
  margin: 0;
  padding: 0;
}

ul,
ol,
li {
  list-style: none;
}

.theme-setting {
  /deep/.el-dialog {
    height: 604px;
    border-radius: 6px;

    .el-dialog__header {
      padding: 20px 20px 10px;
      border-bottom: 1px solid rgba(13, 20, 30, 0.1);

      .el-dialog__title {
        height: 21px;
        font-size: 16px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: rgba(13, 20, 30, 1);
        line-height: 21px;
      }

      .el-dialog__headerbtn {
        margin-top: -4px;
      }
    }

    .el-dialog__body {
      position: relative;
      display: flex;
      height: 500px;
      padding: 0;
      border-bottom: 1px solid rgba(13, 20, 30, 0.1);

      .theme-left {
        width: 220px;
        margin-left: 20px;
        border-right: 1px solid rgba(13, 20, 30, 0.1);

        .theme-title {
          display: flex;
          margin-top: 20px;

          .title {
            height: 19px;
            margin-right: 4px;
            font-size: 14px;
            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
            font-weight: bold;
            color: rgba(13, 20, 30, 1);
            line-height: 19px;
          }

          .des {
            height: 16px;
            font-size: 12px;
            font-family: MicrosoftYaHei;
            color: rgba(13, 20, 30, 0.6);
            line-height: 19px;
          }
        }

        .selected-list {
          height: 420px;
          margin-top: 20px;
          overflow: auto;

          .selected-theme {
            width: 160px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            margin-bottom: 16px;
            cursor: pointer;
            background: linear-gradient(180deg, rgba(43, 46, 83, 1) 0%, rgba(108, 116, 150, 1) 100%);
            border-radius: 6px;
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: rgba(255, 255, 255, 1);
          }
        }
      }

      .theme-right {
        width: calc(100% - 220px - 40px);
        padding: 0 20px;

        .theme-title {
          display: flex;
          flex-direction: row;
          align-items: flex-end;
          justify-content: space-between;
        }

        .theme-right-title {
          display: flex;
          margin-top: 20px;

          .title {
            height: 19px;
            margin-right: 4px;
            font-size: 14px;
            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
            font-weight: bold;
            color: rgba(13, 20, 30, 1);
            line-height: 19px;
          }

          .des {
            height: 16px;
            font-size: 12px;
            font-family: MicrosoftYaHei;
            color: rgba(13, 20, 30, 0.6);
            line-height: 19px;
          }
        }

        .theme-right-list {
          width: 100%;
          height: 420px;
          overflow-y: auto;
          margin-top: 20px;

          .theme-right-item {
            width: 160px;
            height: 48px;
            line-height: 48px;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
            background: rgba(247, 248, 252, 1);
            border-radius: 6px;
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: rgba(13, 20, 30, 0.4);
            text-align: center;
            cursor: pointer;
          }
        }

        .theme-right-list::before,
        .theme-right-list::after {
          content: "";
          display: table;
        }

        .theme-right-list::after {
          clear: both;
        }
      }
    }

    .el-dialog__footer {
      padding: 10px 20px 10px;

      .dialog-footer {
        .el-button+.el-button {
          margin-left: 16px;
        }
      }
    }
  }
}
</style>